<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <workCalendar></workCalendar>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <h3>{{ $t('dashboard.processPlanning') }}</h3>
          <el-button @click="changeLang">{{
            $t('dashboard.changeLang')
          }}</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
export default {
  name: 'Dashboard',
  components: {
    workCalendar: () => import('./components/work-calendar.vue')
  },
  methods: {
    // 修改语言
    changeLang () {
      console.log(this.$i18n.locale)
      // 修改
      // this.$i18n.locale = this.$i18n.locale === 'en' ? 'zh' : 'en'
      // 将语言保存到 cookie 中
      Cookie.set('lang', this.$i18n.locale === 'en' ? 'zh' : 'en')
      // 更新 element 中的语言
      window.location.reload()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
